<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="home">
        <!-- //导航 -->
        <home-head></home-head>
        <!-- 搜索 -->
        <search></search>
        <!-- 轮播 -->
        <div class="home-wiper">
          <img class="bg-img" src="@/assets/home_radious.png" alt="" />
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item3 in banner" :key="item3.id">
              <img :src="item3.picUrl" alt="" />
            </van-swipe-item>
          </van-swipe>
        </div>

        <!-- 九宫格 -->
        <van-grid :column-num="3" :border="border" icon-size="1.12rem">
          <van-grid-item
            v-for="item2 in cate"
            :key="item2.id"
            :icon="item2.icon"
            :text="item2.name"
            :to="{
              path: '/list',
              query: {
                cateId: item2.id,
              },
            }"
          />
        </van-grid>
        <!-- 猜你喜欢 -->
        <van-list
          error-text="请求失败，点击重新加载"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <items
            :items="items"
            @receiveItem="goDetail"
            @emitAddCart="emitCart"
          ></items>
        </van-list>
      </div>
    </van-pull-refresh>
    <tabbar></tabbar>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { fetchCate, fetchHomeBanner, fetchItem, fetchAddCart } from '_api'
import Tabbar from '_components/Tabbar'
import Search from '_components/Search.vue'
import HomeHead from './components/HomeHead'
import Items from './components/Items'
import { getToken } from '_utils/token.js'
export default {
  name: 'Home',
  data () {
    return {
      banner: [],
      cate: [],
      border: false,
      // 猜你喜欢商品数据
      items: [],
      loading: false, // 上拉
      isLoading: false, // 下拉
      finished: false, // 上拉完成
      page: 1, // 当前页
      pageSize: 8 // 一页多少条
    }
  },
  components: { Tabbar, HomeHead, Search, Items },

  created () {
    // this.$store.dispatch('cart/getInfo')
    this.fetchCate()
    this.fetchHomeSwiper()
  },

  methods: {
    onLoad () {
      // 上拉
      this.fetchItem()
      this.page++
    },
    onRefresh () {
      // 下拉
      this.page = 1
      this.items = []
      this.finished = false
      this.fetchItem()
      this.page++
    },
    // 轮播数据
    fetchHomeSwiper () {
      fetchHomeBanner().then(res => {
        if (res.data.code === 0) {
          this.banner = res.data.data
        }
      })
    },
    // 分类数据
    fetchCate () {
      fetchCate().then(res => {
        if (res.data.code === 0) {
          this.cate = res.data.data
        }
      })
    },
    // 猜你喜欢列表数据
    fetchItem () {
      // 请求首页推荐商品数据
      fetchItem({
        categoryId: '72399',
        page: this.page,
        pageSize: this.pageSize
      })
        .then(res => {
          // 加载完成 拿到数据
          this.isLoading = false
          this.loading = false
          if (res.data.code === 0) {
            // 合并数据
            this.items = [...this.items, ...res.data.data.result]
            // Toast('加载成功')
          }
          if (res.data.code === 700) {
            // 到达最后一页
            this.finished = true
            // Toast('已经到底了哦')
          }
        })
        .catch(res => {
          // Toast('請求超時')
        })
    },

    // 去详情页路由
    goDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    // 点击小图片加入购物车
    emitCart (id) {
      fetchAddCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.$store.commit('cart/set_info', {
            item: res.data.data.item,
            number: res.data.data.number
          })
          Toast.success({
            message: '加入购物车成功'
          })
        } else {
          Toast({
            type: 'fail',
            message: '当前没有登录'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: 1.2rem;
}
/deep/ .van-grid-item__content--center {
  background-color: #f7f7f7;
}
/deep/ .van-grid {
  margin-top: 10px;
}
.van-grid-item {
  height: 1.893333rem;
}
.van-grid-item__text {
  font-size: 0.293333rem;
}
/deep/ .van-icon__image {
  border-radius: 100px;
}

.index {
  width: 0.586667rem;
  height: 0.586667rem;
  background-color: aqua;
}
.home-wiper {
  position: relative;
  height: 3.053333rem;
  .bg-img {
    width: 100%;
    height: 3.013333rem;
  }
}
.my-swipe {
  position: absolute;
  width: 9.36rem;
  height: 3.053333rem;
  left: 0.32rem;
  top: 0;
  border-radius: 0.266667rem;
  img {
    width: 100%;
  }
}
</style>
